/*组件：loading start*/

.loading_mask {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    text-align: center;
    .loading_point_container {
        position: relative;
        display: inline-block;
        height: 54px;
        width: 180px;
        top: 50%;
        margin-top: -27px;
        z-index: 5;
    }
    &:after {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: #ffffff;
        content: '';
        z-index: 3;
        opacity: 0.4;
    }
    &.ant-spin-transparent {
        &:after {
            opacity: 0;
        }
    }
    &.ant-spin-opaque {
        &:after {
            opacity: 1;
        }
    }
}

.point_container {
    margin: 0 auto 8px auto;
    width: 104px;
    height: 24px;
    line-height: 24px;
    .point_loading_text {
        font-size: 16px;
        color: #0d51c2;
    }
    .point {
        float: left;
        width: 0;
        height: 0;
        padding: 9px;
        border-radius: 50%;
        margin-top: 3px;
        &:first-child {
            margin-left: 4px;
        }
        &:not(:first-child) {
            margin-left: 8px;
        }
        &.point1 {
            @include animation(point_loading1 1s infinite);
        }
        &.point2 {
            @include animation(point_loading12 1s infinite);
        }
        &.point3 {
            @include animation(point_loading13 1s infinite);
        }
        &.point4 {
            @include animation(point_loading14 1s infinite);
        }
    }
}

@include keyframes(point_loading1) {
    0% {
        background-color: #d4f0fe;
    }
    25% {
        background-color: #1aadf8;
    }
    50% {
        background-color: #5dc5fb;
    }
    75% {
        background-color: #9eddfd;
    }
    100% {
        background-color: #d4f0fe;
    }
}

;
@include keyframes(point_loading12) {
    0% {
        background-color: #9eddfd;
    }
    25% {
        background-color: #d4f0fe;
    }
    50% {
        background-color: #1aadf8;
    }
    75% {
        background-color: #5dc5fb;
    }
    100% {
        background-color: #9eddfd;
    }
}

;
@include keyframes(point_loading13) {
    0% {
        background-color: #5dc5fb;
    }
    25% {
        background-color: #9eddfd;
    }
    50% {
        background-color: #d4f0fe;
    }
    75% {
        background-color: #1aadf8;
    }
    100% {
        background-color: #5dc5fb;
    }
}

;
@include keyframes(point_loading14) {
    0% {
        background-color: #1aadf8;
    }
    25% {
        background-color: #5dc5fb;
    }
    50% {
        background-color: #9eddfd;
    }
    75% {
        background-color: #d4f0fe;
    }
    100% {
        background-color: #1aadf8;
    }
}

;
@include keyframes(green_loading1) {
    0% {
        background-color: #d4f0fe;
    }
    25% {
        background-color: #03a463;
    }
    50% {
        background-color: #30a677;
    }
    75% {
        background-color: #74ae97;
    }
    100% {
        background-color: #d4f0fe;
    }
}

;
@include keyframes(green_loading12) {
    0% {
        background-color: #74ae97;
    }
    25% {
        background-color: #d4f0fe;
    }
    50% {
        background-color: #03a463;
    }
    75% {
        background-color: #30a677;
    }
    100% {
        background-color: #74ae97;
    }
}

;
@include keyframes(green_loading13) {
    0% {
        background-color: #30a677;
    }
    25% {
        background-color: #74ae97;
    }
    50% {
        background-color: #d4f0fe;
    }
    75% {
        background-color: #03a463;
    }
    100% {
        background-color: #30a677;
    }
}

;
@include keyframes(green_loading14) {
    0% {
        background-color: #d4f0fe;
    }
    25% {
        background-color: #30a677;
    }
    50% {
        background-color: #74ae97;
    }
    75% {
        background-color: #d4f0fe;
    }
    100% {
        background-color: #03a463;
    }
}

;
.ant-spin-opaque {
    &>.ant-spin-blur {
        // 这个改了，之前是没有，不知道会不会出问题
        opacity: 0;
        &:after {
            opacity: 1;
        }
    }
}

.ant-spin-transparent {
    &>.ant-spin-blur {
        opacity: 1;
        &:after {
            opacity: 0;
        }
    }
}

.ant-spin-nested-loading {
    &>div {
        &>div.ant-spin {
            max-height: 800px;
        }
    }
}

.ant-spin-show-text {
    .ant-spin-text {
        text-shadow: none !important;
        // color: #1da46e;
    }
}

// .ant-spin-dot-item {
//     background-color: #1da46e;
// }
.ant-spin {
    @include flex;
    @include flex-direction(column);
    @include justify-content(center);
    @include align-items(center);
}


/*组件：loading end*/